<!DOCTYPE html>
<style>
    .scrollable-container {
        width: 300px;
        height: 300px;
        overflow-y: scroll;
        border: 5px solid red;
        position: relative;
    }

    .sticky-box {
        width: 240px;
        height: 80px;
        background: #3498db;
        color: white;
    }

    .box {
        height: 500px;
        background-color: orange;
    }

    .fill-abspos-box-space {
        height: 80px;
    }
</style>

<div class="scrollable-container" id="sticky-is-below-scrollport">
    <div class="box"></div>
    <div class="sticky-box" style="position: absolute; bottom: 50px">
        I stick within this scrollable box!
    </div>
    <div class="fill-abspos-box-space"></div>
    <div class="box"></div>
</div>

<div class="scrollable-container" id="sticky-is-inside-scrollport">
    <div class="box"></div>
    <div class="sticky-box">I stick within this scrollable box!</div>
    <div class="box"></div>
</div>

<div class="scrollable-container" id="sticky-is-above-scrollport">
    <div class="box"></div>
    <div class="sticky-box">I stick within this scrollable box!</div>
    <div class="box"></div>
</div>

<script>
    const stickyIsBelowScrollport = document.getElementById("sticky-is-below-scrollport");
    stickyIsBelowScrollport.scrollTop = 0;

    const stickyIsInsideScrollport = document.getElementById("sticky-is-inside-scrollport");
    stickyIsInsideScrollport.scrollTop = 390;

    const stickyIsAboveScrollport = document.getElementById("sticky-is-above-scrollport");
    stickyIsAboveScrollport.scrollTop = 780;
</script>
